<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<title>悠思博客</title>
<meta name="keywords" content="个人博客"/>
<meta name="description" content="这是我的个人博客"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/m.css" rel="stylesheet">

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.easyfader.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/modernizr.js"></script>
<![endif]-->
<script>
    window.onload = function () {
        var oH2 = document.getElementsByTagName("h2")[0];
        var oUl = document.getElementsByTagName("ul")[0];
        oH2.onclick = function () {
            var style = oUl.style;
            style.display = style.display == "block" ? "none" : "block";
            oH2.className = style.display == "block" ? "open" : ""
        }
    }
</script>
</head>
<body>
<header>
    <div id="mnav">
        <h2><span class="navicon"></span></h2>
        <ul>
            <li><a href="${pageContext.request.contextPath}/index.html">网站首页</a></li>
            <li><a href="#" onclick="alert('建设中')">关于我</a></li>
            <li><a href="#" onclick="alert('建设中')">留言</a></li>
        </ul>
    </div>
    <div class="topnav">
        <nav>
            <ul>
                <li><a href="${pageContext.request.contextPath}/index.html">网站首页</a></li>
                <li><a href="#" onclick="alert('建设中')">关于我</a></li>
                <li><a href="#" onclick="alert('建设中')">留言</a></li>
            </ul>
        </nav>
    </div>
</header>
<article>
    <div class="banner">
        <div id="sucaihuo" class="fader">
            <c:forEach items="${bannerlist}" var="item">
                <img class="slide" src="${pageContext.request.contextPath}${item.picPath}">
            </c:forEach>
            <div class="fader_controls">
                <div class="page prev" data-target="prev">&lsaquo;</div>
                <div class="page next" data-target="next">&rsaquo;</div>
                <ul class="pager_list">
                </ul>
            </div>
        </div>
    </div>
    <div class="newblogs">
        <h2 class="hometitle">最新文章</h2>
        <div id="newblog">

        </div>
    </div>
    <div class="rbox">
        <div class="paihang">
            <h2 class="hometitle">分类</h2>
            <ul>
                <c:forEach items="${typelist}" var="type">
                    <a href="javascript:void(0)" onclick="typeOnclick('${type.id}')"><li> ${type.typeName}</li></a>
                </c:forEach>
            </ul>
        </div>
        <div class="paihang">
            <h2 class="hometitle">时间</h2>
            <ul>
                <c:forEach items="${datelist}" var="date">
                    <a href="javascript:void(0)" onclick="dateOnclick('${date}')" target="_blank"><li>${date}</li></a>
                </c:forEach>
            </ul>
        </div>

        <div class="weixin">
            <h2 class="hometitle">官方微信</h2>
            <ul>
                <img src="${pageContext.request.contextPath}/static/images/wx.png">
            </ul>
        </div>
    </div>
</article>
<footer>
    <p>Design by <a href="#">悠思个人博客</a> <a href="#">京ICP备18018954号</a></p>
</footer>
</body>

<script type="text/javascript">

    $('#sucaihuo').easyFader();

    var page = 1;
    var type = "";
    var date = "";

    $(function () {
        //获取博客页面
        load_page(page);
    });

    //追加
    function typeOnclick(val) {
        page = 1;
        type = val;
        date = "";
        load_page(page);
    }
    //覆盖
    function dateOnclick(val) {
        page = 1;
        type = "";
        date = val;
        load_page(page);
    }


    function load_page(page) {
        $.ajax({
            url: '${pageContext.request.contextPath}/blog_info_index_list_data',
            type: 'post',
            dataType: 'html',
            data: {'page': page,"typeid":type,"releasetime":date},
            async: false,
            success: function (result) {
                $("#newblog").html("");
                $("#newblog").append(result);
            },
            error: function () {
                alert("异常！");
            }
        });
    }

</script>
</html>